<template lang="html">
  <transition :name="transitionName">
    <router-view class="child-view"></router-view>
  </transition>
</template>

<script>
import store from 'src-store'
import * as types from '@/store/types'
import utils from 'src-common/utils'
import buildTheme from 'src-common/build-theme'
// import Color from 'color'
import config from '@/config'
import { mapState } from 'vuex'
import 'nprogress/nprogress.css'

export default {
  name: 'root',
  data () {
    return {
      siteInfo: null,
      colors: null,
      error: null,
      transitionName: 'slide-left',
    }
  },
  beforeRouteEnter (to, from, next) {
    const site = to.params.site
    localStorage.setItem('_site', site)
    localStorage.setItem('_p', utils.getUrlParam('_p'))
    // 初始化站点信息
    store
      .dispatch(types.FETCH_SITE, { site: site })
      .then(
        res => {
          if (res && res.profile) {
            next()
          } else {
            next('/404')
          }
        },
        e => { next('/404') },
      )
  },
  computed: mapState({
    brandColor: state => state.app.theme['brand-primary'],
    theme: state => state.app.theme,
  }),
  created () {
    // console.log(Color(this.brandColor).rgb().string())
    // console.log(Color(this.brandColor).lighten(0.2).rgb().string())
    // console.log(Color(this.brandColor).darken(0.2).rgb().string())

    const site = this.$route.params.site
    buildTheme(this.theme, config.style, site)
  },
  watch: {
    '$route' (to, from) {
      // 页面转场动画
      const toDepth = to.path.split('/').length
      const fromDepth = from.path.split('/').length
      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
    }
  },
}
</script>

<style lang="less">

// page-loading
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s ease;
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

// 页面转场
.child-view {
  position: absolute;
  width: 100%;
  transition: all .5s cubic-bezier(.55,0,.1,1);
}

.slide-left-enter, .slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(30px, 0);
  transform: translate(30px, 0);
}
.slide-left-leave-active, .slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-30px, 0);
  transform: translate(-30px, 0);
}
</style>
